<template>
  <div class="home">
    <div class="home_header">
    </div>
    <div class="welcome">
      <img :src="img_url" alt="加载失败">
      <div class="font">欢迎！管理员
        <span>{{ username }}</span>
      </div>
    </div>
    <hr class="divider"/>
    <div>
      <div class="setting_title">轮播图设置</div>
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in pis" :key="item">
          <!--            <h3 text="2xl" justify="center">{{ item }}</h3>-->
          <img class="pics" :src=item alt="carousel image">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content_setting">
      <div class="course_intro">
        <div class="setting_title">课程介绍</div>
        <div class="setting_title"> -----游戏策划</div>
        <div class="intro_content" v-html="courseBase.course_intro"/>
        <div> 更新时间：{{ courseBase.update_time }}</div>
      </div>
      <hr class="divider"/>
      <div class="tech_team">
        <div class="setting_title">教学团队</div>
        <div class="setting_title"> -----游戏策划</div>
        <div class="team_content">
          <div v-for="(item,index) in teachers" :key="index">
            <img :src="item.tech_pic" class="teacher">
            <div class="setting_title" style="font-size: 20px">{{ item.username }}</div>
          </div>
        </div>
      </div>
      <div class="toTop" @click="scrollToTop">
        <svg t="1731926380616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="4228" width="32" height="32">
          <path
              d="M544 467.2C544 460.8 544 460.8 544 467.2L531.2 448C524.8 441.6 518.4 441.6 512 441.6c-6.4 0-12.8 0-19.2 6.4L480 460.8c0 0 0 0 0 0l-204.8 204.8c-12.8 12.8-12.8 25.6 0 38.4l12.8 12.8c12.8 12.8 25.6 12.8 38.4 0L512 531.2l185.6 185.6c12.8 12.8 25.6 12.8 38.4 0l12.8-12.8c12.8-12.8 12.8-25.6 0-38.4L544 467.2zM512 0C230.4 0 0 230.4 0 512c0 281.6 230.4 512 512 512s512-230.4 512-512C1024 230.4 793.6 0 512 0zM512 960c-249.6 0-448-198.4-448-448 0-249.6 198.4-448 448-448s448 198.4 448 448C960 761.6 761.6 960 512 960zM256 288C256 288 256 288 256 288c0 19.2 0 64 0 64 0 0 0 0 0 0L768 352c0 0 0 0 0 0L768 288c0 0 0 0 0 0L256 288z"
              fill="#e98f36" p-id="4229"></path>
        </svg>
      </div>
    </div>
  </div>

</template>

<script setup>
import {ref} from "vue";
import {getCourseIntro, getTeacherTeam} from '@/apis/apis.js'
import {onMounted} from "vue";
import {ElMessage} from "element-plus";

const pis = [
  "https://re.bluepoch.com/home/img/backstory/p1.png",
  "https://re.bluepoch.com/home/img/backstory/p8.png",
  "https://re.bluepoch.com/home/img/backstory/p2.png",
  "https://re.bluepoch.com/home/img/backstory/p5.png",
  "https://re.bluepoch.com/home/img/backstory/p6.png"
]
const img_url = localStorage.getItem("img_url")
const username = localStorage.getItem("username")
const courseId = 1;
let courseBase = ref({})
let teachers = ref([{}])

const fetchCourseIntro = async (data) => {
  const rep = await getCourseIntro(data)
  // console.log("我这么大一个rep哪里去了！！"+JSON.stringify(rep.data))
  try {
    if (rep.data.status === 1) {
      courseBase.value = rep.data.data
    } else {
      ElMessage({
        showClose: true,
        message: 'rep.data.msg',
        type: 'error',
      })
    }
  } catch (err) {
    console.log(err)
    ElMessage({
      showClose: true,
      message: '连接失败！',
      type: 'error',
    })
  }
}
const fetchTeacherTeam = async (data) => {
  const rep = await getTeacherTeam(data)
  // console.log("我这么大一个rep哪里去了！！"+JSON.stringify(rep.data))
  try {
    if (rep.data.status === 1) {
      teachers.value = rep.data.data
    } else {
      ElMessage({
        showClose: true,
        message: 'rep.data.msg',
        type: 'error',
      })
    }
  } catch (err) {
    console.log(err)
    ElMessage({
      showClose: true,
      message: '连接失败！',
      type: 'error',
    })
  }
}
//回到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  });
}
onMounted(() => {
  fetchCourseIntro(courseId);
  fetchTeacherTeam(courseId);
});

</script>

<style scoped>

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.home {
}

.home_header {
  width: 100vw;
  background: -50% 0%/200% 100% linear-gradient(90deg, rgba(187, 227, 255, 0.5), rgba(227, 187, 255, 0.57), rgba(187, 227, 255, 0.5));
  color: transparent;
}

.welcome {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  width: 50vw;
  height: 50vh;
  margin: 40px auto;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 50px;
  transition: box-shadow 0.5s ease;
}

.welcome img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.welcome img:hover {
  box-shadow: 0 0 10px rgba(255, 242, 0, 0.74), /* 第一层阴影，轻微的内发光 */ 0 0 20px rgb(255, 223, 187), /* 第二层阴影，更强的内发光 */ 0 0 30px rgb(255, 243, 210); /* 第三层阴影，较弱的外发光 */
}

.welcome .font {
  background: -50% 0%/200% 100% linear-gradient(90deg, #32967048, #0a26ff, #32967048);
  color: transparent;
  background-clip: text;
  padding: 0 70px;
  font-size: 50px;
  font-family: 华文行楷, sans-serif;
}

.welcome .font span {
  background: -50% 0%/200% 100% linear-gradient(90deg, rgb(187, 227, 255), #e3bbff, rgb(187, 227, 255));
  color: transparent;
  background-clip: text;
  font-size: 50px;
}

.welcome:hover {
  box-shadow: 0 0 10px rgba(224, 62, 62, 0.3), /* 第一层阴影，轻微的内发光 */ 0 0 20px rgb(255, 223, 187), /* 第二层阴影，更强的内发光 */ 0 0 30px rgb(255, 243, 210); /* 第三层阴影，较弱的外发光 */
}

.pics {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.divider {
  border: #a9d6ff 5px solid;
  margin: 30px auto;
}

.content_setting {
  margin: 30px auto;
  padding: 40px;
}

.tech_team {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;

}

.team_content {
  margin: 20px;
  width: 80vw;
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  align-items: center;
  justify-content: space-around;
}

.team_content img {
  height: 300px;
  width: 200px;
  object-fit: cover;
  border-radius: 20px;
  overflow: hidden;
}

.teacher {
  box-shadow: 0 0 10px rgba(82, 68, 68, 0.3);
  transition: box-shadow, transform 0.3s ease; /* 添加过渡效果 */
}

.teacher:hover {
  box-shadow: 0 0 10px rgba(224, 62, 62, 0.3), /* 第一层阴影，轻微的内发光 */ 0 0 20px rgb(255, 223, 187), /* 第二层阴影，更强的内发光 */ 0 0 30px rgb(255, 243, 210); /* 第三层阴影，较弱的外发光 */
  transform: scale(1.2); /* 放大到原来的1.2倍 */
}

.course_intro {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.setting_title {
  margin: 10px 0;
  font-family: 华文行楷, sans-serif;
  font-size: 40px;
  text-align: center;
}

.intro_content {
  width: 100%;
  margin: 10px auto;
  background: rgba(167, 223, 255, 0.25);
  border-radius: 15px;
  border: #a9d6ff 5px solid;
  text-align: center;
}

.toTop {
  position: fixed;
  right: 100px;
  bottom: 100px;
}
</style>